<template>
	<view class="follow-user-card">
		<view class="card-content" @click="handleUserClick">
			<!-- 用户头像和基本信息 -->
			<view class="user-info">
				<view class="avatar-container">
					<image :src="userInfo.avatar || defaultAvatar" class="user-avatar" mode="aspectFill" />
				</view>
				<view class="user-details">
					<view class="user-name">{{ userInfo.nickName || userInfo.userName || '未知用户' }}</view>
				</view>
			</view>
			
			<!-- 关注按钮 -->
			<view class="follow-btn" @click.stop="handleFollowClick">
				<view :class="['btn', localIsFollowing ? 'following' : 'follow']">
					<text>{{ localIsFollowing ? '已关注' : '关注' }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, computed, defineProps, defineEmits, watch } from 'vue'
import { addFollow, delFollow } from '@/api/follow/follow'
import useUserStore from '@/store/modules/user'

interface UserInfo {
	userId: number
	nickName?: string
	userName?: string
	avatar?: string
	signature?: string
	bio?: string
}

interface Props {
	userInfo: UserInfo
	isFollowing: boolean
	followId?: number // 关注记录的ID，用于取消关注
}

const props = defineProps<Props>()
const emit = defineEmits<{
	userClick: [user: UserInfo]
	followChange: [userId: number, isFollowing: boolean, followId?: number]
}>()

const userStore = useUserStore()
const currentUser = computed(() => userStore.user)
const defaultAvatar = '/static/images/default-avatar.png'
const loading = ref(false)

// 使用本地状态来控制按钮显示
const localIsFollowing = ref(props.isFollowing)
const localFollowId = ref(props.followId)

// 监听props变化，同步到本地状态（用于下拉刷新时更新）
watch(() => props.isFollowing, (newVal) => {
	localIsFollowing.value = newVal
})

watch(() => props.followId, (newVal) => {
	localFollowId.value = newVal
})

const handleUserClick = () => {
	emit('userClick', props.userInfo)
}

const handleFollowClick = async () => {
	if (loading.value) return
	
	loading.value = true
	try {
		if (localIsFollowing.value) {
			// 取消关注 - 修改这部分
			const unfollowData = {
				followedUserId: props.userInfo.userId,
				fansId: currentUser.value.userId
			}
			await delFollow(unfollowData)
			uni.showToast({
				title: '已取消关注',
				icon: 'success'
			})
			// 立即更新本地状态
			localIsFollowing.value = false
			localFollowId.value = undefined
			emit('followChange', props.userInfo.userId, false)
		} else {
			// 添加关注
			const followData = {
				followedUserId: props.userInfo.userId,
				fansId: currentUser.value.userId
			}
			const result = await addFollow(followData)
			uni.showToast({
				title: '关注成功',
				icon: 'success'
			})
			// 立即更新本地状态
			localIsFollowing.value = true
			localFollowId.value = result.data?.id
			emit('followChange', props.userInfo.userId, true, result.data?.id)
		}
	} catch (error) {
		console.error('关注操作失败:', error)
		uni.showToast({
			title: '操作失败',
			icon: 'none'
		})
	} finally {
		loading.value = false
	}
}
</script>

<style lang="scss" scoped>
.follow-user-card {
	background: white;
	border-radius: 24rpx;
	padding: 32rpx;
	margin-bottom: 24rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;

	&:active {
		transform: scale(0.98);
	}
}

.card-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.user-info {
	display: flex;
	align-items: center;
	flex: 1;
}

.avatar-container {
	margin-right: 24rpx;

	.user-avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		border: 4rpx solid #f0f0f0;
	}
}

.user-details {
	flex: 1;

	.user-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 8rpx;
		line-height: 1.2;
	}
}

.follow-btn {
	.btn {
		padding: 16rpx 32rpx;
		border-radius: 40rpx;
		font-size: 28rpx;
		font-weight: 600;
		transition: all 0.3s ease;
		border: 2rpx solid;
		text-align: center;
		min-width: 120rpx;

		&.follow {
			background: #1890ff;
			color: white;
			border-color: #1890ff;

			&:active {
				background: #096dd9;
				border-color: #096dd9;
			}
		}

		&.following {
			background: white;
			color: #666;
			border-color: #d9d9d9;

			&:active {
				background: #f5f5f5;
			}
		}
	}
}
</style>